<template>
	<view class="pagebox flex-column" @click="obj.showMod=false" :style="{'padding': `${obj.room.identity=='user'?(obj.csdataShow?280:120):0}rpx 30rpx 0`}">
		<view class="topcus flex-column-center" v-if="obj.room.identity=='user'&&obj.csdata">
			<template v-if="obj.csdataShow">
				<image class="head" :src="(obj.csdata&&obj.csdata.cs_head)?`${proxy.$c.fileHost}head/${obj.csdata.cs_head}`:'../../static/34.png'" mode="aspectFill"></image>
				<span class="company">江苏瑞佳丝网制品有限公司</span>
				<span v-if="obj.csdata&&obj.csdata.cs_name" class="weight">{{obj.csdata.cs_name||''}}</span>
			</template>
			<template v-else>
				<span class="company">江苏瑞佳丝网制品有限公司</span>
			</template>
			<image class="shouicon" :src="`../../static/${obj.csdataShow?'48':'47'}.png`" mode="aspectFill" @click="obj.csdataShow=!obj.csdataShow"></image>
		</view>
		<view v-if="obj.loadstatus==='noMore'" class="nomore w100 flex-center">{{obj.loadstatus==='loading'?'获取中...':(obj.loadstatus==='noMore'?'没有更多了':'上滑获取更多')}}</view>
		<view class="w100" :id="`chatitem_001`">
			<view :class="['chartitem','leftitem']">
				<view class="head">
					<image class="head" src="../../static/34.png" mode="aspectFill"></image>
				</view>
				<view class="content">
					<view class="namebox">江苏瑞佳丝网制品有限公司</view>
					<view class="flex-row ju-between al-flex-start">
						<view class="text_chart">{{`您好，${obj.u.nickname}。很高兴为您服务，请问您要了解哪些产品？`}}</view>
					</view>
				</view>
			</view>
		</view>
		<template v-for="(v,i) in obj.list" :key="i">
			<view class="w100" :id="`chatitem_${v.chat_id}`">
				<view class="w100 flex-center intime" v-if="obj.room.identity=='user'&&['cs_out','cs_in'].includes(v.msg.type)">{{v.msg.msg}}</view>
				<view class="w100 flex-center intime" v-if="obj.room.identity=='cs'&&v.msg.type==='user_out'">{{v.msg.msg}}</view>
				<template v-if="v.msg.type.indexOf('out')==-1&&v.msg.type.indexOf('cs_in')==-1">
					<view class="w100 flex-center intime" v-if="v.showtime">{{v.intime}}</view>
					<view class="w100 flex-center intime" v-if="v.type==='cs_out'">{{v.msg}}</view>
					<view :class="['chartitem',v.isme?'rightitem':'leftitem']">
						<view class="head" v-if="!v.isme">
							<image v-if="v.type==='cs'" class="head" :src="v.cs_head?`${proxy.$c.fileHost}head/${v.cs_head}`:`../../static/logo.png`" mode="aspectFill"></image>
							<image v-else class="head" :src="v.head?`${proxy.$c.fileHost}head/${v.head}`:'../../static/34.png'" mode="aspectFill"></image>
						</view>
						<view class="content">
							<view class="namebox" v-if="!v.isme">{{v.type==='cs'?v.cc_name:v.username}}</view>
							<view class="flex-row ju-between al-flex-start">
								<view v-if="v.msg.type==='text'" class="text_chart">{{v.msg.msg||''}}</view>
								<image v-if="v.msg.type==='image'" class="img_chart" :src="v.msg.msg" mode="widthFix" @click="proxy.$c.previewImage(v.msg.msg)"></image>
								<view v-if="v.msg.type==='product'" class="probox1" @click="proxy.$c.go_url(`/pages/productDetail?id=${v.msg.msg.product_id}&size_id=${v.msg.msg.size_id}&identity=${obj.room.identity}`)">
									<view class="coverbox"><image class="cover" :src="v.msg.msg.cover" mode="aspectFill"></image></view>
									<view class="pd15 flex-column">
										<view class="protitle lineOne">{{v.msg.msg.title}}</view>
										<view class="price" v-if="v.msg.msg.price">
											<text>¥{{v.msg.msg.price}}</text>
											<text class="desc">元/{{v.msg.msg.unit_}}</text>
										</view>
										<view class="price" v-else>¥{{v.msg.msg.min_price}}{{v.msg.msg.min_price?`-¥${v.msg.msg.min_price}`:''}}</view>
										<!-- <view class="min_nums" v-if="v.msg.msg.min_num_unit">最低起购量：{{v.msg.msg.min_num_unit}}</view> -->
									</view>
								</view>
							</view>
						</view>
						<view class="head" v-if="v.isme">
							<image v-if="v.type==='cs'" class="head" :src="v.cs_head?`${proxy.$c.fileHost}head/${v.cs_head}`:`../../static/logo.png`" mode="aspectFill"></image>
							<image v-else class="head" :src="v.head?`${proxy.$c.fileHost}head/${v.head}`:'../../static/34.png'" mode="aspectFill"></image>
						</view>
					</view>
				</template>
			</view>
		</template>
		
		<view id="bottom_space" :style="{width: '100%'}"></view>
		
		<!-- <root-portal> -->
			<view :class="['bottombox',obj.inputBottom>0?'':'inputBottom']" :style="{bottom: `${obj.inputBottom}px`,'padding-bottom': `${obj.inputBottom>0?10:obj.safeAreaBottom||10}px`}" @click.stop="()=>{}">
				<view class="chartbox flex-row-center">
					<view class="inputbox flex-row-center">
						<input type="text" v-model="obj.chatText" :disabled="obj.isChartEnd==0" :adjust-position="false" placeholder="请在此输入内容" @keyboardheightchange="keyboardheightchange" />
						<view class="addiconbox flex-center" @click="showMod">
							<image class="addicon" src="../../static/6.png" mode="aspectFill"></image>
						</view>
					</view>
					<button v-if="obj.chatText" class="send" :disabled="obj.sendDisabled" @click="sendInput">发送</button>
					<!-- <view class="iconbox" @click="outchart"> <image src="../../static/36.png" mode="aspectFill"></image> </view> -->
				</view>
				<template v-if="obj.showMod">
					<view class="modbox flex-row wrap mt30">
						<view class="mod flex-column-center" v-for="(v,i) in obj.mods" :key="i" @click="selectMod(v)">
							<view class="item flex-center"><image class="" :src="`../../static/${v.icon}.png`" mode="widthFix"></image></view>
							<text class="name">{{v.name}}</text>
						</view>
					</view>
				</template>
			</view>
		<!-- </root-portal> -->
		
		<uni-popup ref="popup" background-color="#fff" borderRadius="20rpx 20rpx 0 0" @maskClick="closePopup">
			<view class="popup-content pd30 flex-column">
				<view class="flex-row-center ju-between mb30">
					<text class="poptitle">{{obj.room.identity==='cs'?'请选择产品':'请选择您要咨询的产品'}}</text>
					<image class="closeicon" src="../../static/33.png" mode="aspectFill" @click="closePopup"></image>
				</view>
				<view class="flex1 hidden">
					<products v-if="obj.showprops" :identity="obj.room.identity" @select="proSelect" />
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted,watch } from 'vue'
	import { onLoad,onShow,onUnload,onReady,onTabItemTap,onReachBottom,onPullDownRefresh,onPageScroll,onBackPress } from '@dcloudio/uni-app';
	import products from './products'
	import dayjs from 'dayjs'
	import 'dayjs/locale/zh-cn';
	dayjs.locale('zh-cn') 
    import relativeTime from "dayjs/plugin/relativeTime";
	dayjs.extend(relativeTime)

    let { proxy } = getCurrentInstance()
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		u: proxy.$c.getUser()?JSON.parse(proxy.$c.getUser()):{},
		pro: {},
		pros: [],
		showMod: false,
		mods: [
			{
				name: '照片',
				icon: '37',
			},
			{
				name: '拍摄',
				icon: '38',
			},
			{
				name: '产品',
				icon: '39',
			},
		],
		tstOpt: {},
		room: {},
		csdata: null,
		csdataShow: false,
		isReceived: false,//是否被接待
		newitem: proxy.$c.Websocket.newitem,
		soketOnline: proxy.$c.Websocket.soketOnline,
		chatMsg: {
			"room_id": "",
			"company_id": "",
			"msg": '',
		},
		chatText: '',
		req: {
		  "company_id": "",
		  "currentpage": 1,
		  "pagesize": 10
		},
		list: [],
		inputBottom: 0,
		safeAreaBottom: 0,
		sendDisabled: false,
		loadstatus: 'more',//more loading noMore
		isNewpro: false,
		showprops: false,
	})
	
	onLoad(async(opt)=>{
		obj.u = uni.getStorageSync('user')?JSON.parse(uni.getStorageSync('user')):{}
		init(opt)
	})
	
	onReady(()=>{
		uni.onKeyboardHeightChange(res => {
			obj.inputBottom = res.height
		})
	})
	
	onPageScroll((e)=>{
		if(e.scrollTop===0){
			getMore()
		}
	})
	
	// app、H5、支付宝小程序才支持
	onBackPress((e)=>{
		if (e.from === 'navigateBack') {  
			return false;  
		} 
		outchart()
		return true;
	})
	
	watch(
		()=>obj.newitem,
		(val)=>{
			if(val){
				let msg = val.body?JSON.parse(val.body):{};
				const type = msg.action?msg.action.split('_')[0]:''
				console.log('msg',msg);
				if(type!==obj.room.identity&&msg.action){
					if(obj.room.identity==='cs'&&['user_outroom','sys_outroom'].includes(msg.action)){
						// const m = {
						// 	type: 'user_out',
						// 	msg: `${dayjs().format('YYYY-MM-DD HH:mm:ss')} 客户已退出`
						// }
						// send(m)
					}else if(obj.room.identity==='user'&&['cs_outroom','sys_outroom'].includes(msg.action)){
						// const m = {
						// 	type: 'cs_out',
						// 	msg: `${dayjs().format('YYYY-MM-DD HH:mm:ss')} 客服已退出`
						// }
						// send(m)
					}else if(msg.msg&&['cs_chat','user_chat'].includes(msg.action)){
						const item = {
							"isme": false,
							"chat_id": msg.chat_id||proxy.$c.randomStr(),
							"cs_name": msg.cs_name||'',
							"type": msg.action.split('_')[0],
							"msg": JSON.parse(msg.msg),
							"intime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
							"updatetime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
							"username":msg.nickname||msg.username,
							"head": msg.head||'',
							"cs_head": msg.cs_head||'',
						}
						obj.list.push(item)
						if(msg.chat_id){
							isread(msg.chat_id)
						}
						ScrollToBottom()
					}else if(obj.room.identity==='user'&&msg.action==='inroom'){//客服进入
						// const m = {
						// 	type: 'cs_in',
						// 	msg: `我是${msg.cs_name}，很高兴为您服务（${dayjs().format('YYYY-MM-DD HH:mm:ss')} ）`
						// }
						// send(m)
					}
				}
			}
		},{deep:true}
	)
	
	const init=async(opt)=>{
		obj.room = opt
		obj.isNewpro = !!opt.isNewpro//是否新的产品询盘
		obj.chatMsg.room_id = opt.room_id
		obj.chatMsg.company_id = opt.company_id
		obj.chatMsg.userid = opt.userid||''
		obj.req.company_id = opt.company_id
		obj.req.userid = opt.userid||''
		connectChat()
		gethisInit()
		if(obj.room.identity==='user'){
			setReceived()
		}else{
			const isme = await ismeReceived()
			if(!isme){
				const msg = {
					type: 'text',
					msg: `我是${obj.u.name||'客服'}，很高兴为您服务`
				}
				send(msg)
			}
		}
		uni.getSystemInfo({
			success:(res)=>{
				obj.safeAreaBottom = res.safeAreaInsets.bottom
			}
		});
		obj.tstOpt = await getTst()
	}
	
	// 连接广播并监听数据
	const connectChat=()=>{
		let url = `/topic/inquiry/${obj.room.room_id}`
		proxy.$c.Websocket.init({}).then(client=>{
			proxy.$c.Websocket.addSubscribe(url);
		})
	}
	
	const isread=(chat_id)=>{
		proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/inquiry/room/chat/read':'mp/product/inquiry/room/chat/read',{chat_id:chat_id},{token: true})
	}
	
	const setReceived=()=>{
		proxy.$reQuest.post('mp/product/inquiry/room/chat/list',{"company_id": obj.req.company_id,"currentpage": 1,"pagesize": 10000},{token:true}).then(res=>{
			if(res.success&&res.msg&&res.msg.list){
				res.msg.list.map(e=>{
					if(!obj.isReceived){//是否被接待
						obj.isReceived = e.type=='cs'
					}
				})
			}
		})
	}
	
	const ismeReceived=()=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post('customerservice/product/inquiry/chat/list',{...obj.req,"pagesize": 10000},{token:true}).then(res=>{
				if(res.success&&res.msg&&res.msg.list){
					let isme = false
					for (let i = 0; i < res.msg.list.length; i++) {
						let e = res.msg.list[i]
						if(!isme){//是否被接待
							isme = e.cs_id==obj.u.userid
						}
					}
					resovle(isme)
				}else{resovle(false)}
			}).catch((err)=>{
				resovle(false)
			})	
		})
	}
	
	const gethisInit=async()=>{
		obj.req.currentpage = 1
		let msg = await gethis()
		obj.list = []
		if(msg&&msg.list){
			obj.loadstatus = (obj.req.currentpage * obj.req.pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}else{
			obj.loadstatus = 'noMore'
		}
	}
	
	const getMore=async()=>{
		obj.loadstatus = 'loading'
		let msg = await gethis()
		if(msg&&msg.list&&msg.list.length){
			obj.loadstatus = (obj.req.currentpage * obj.req.pagesize < msg.count)?'more':'noMore';
			setdatas(msg.list)
		}else{
			obj.loadstatus = 'noMore'
		}
	}
	
	const setdatas=(list)=>{
		// const last_chatitem_id = `#chatitem_001`
		const last_chatitem_id = obj.list.length?`#chatitem_${obj.list[0].chat_id}`:''
		list.reverse()
		if(list.length){
			list.map((e,i)=>{
				if(obj.room.identity==='user'&&!obj.csdata&&e.type=='cs'){//如果是用户身份 查询接待的客服信息
					obj.csdata = e
				}
				e.isme = e.type===obj.room.identity
				e.time = dayjs(e.intime).fromNow()
				if(i==0){
					e.showtime = true
				}else{
					const beforeintime = list[i-1].intime
					if(dayjs(e.intime).diff(beforeintime, 'minute')>=5){
						e.showtime = true
					}
				}
			})
			const len = list.length - (obj.list.length-(obj.req.currentpage-1)*10)
			const list_ = len>=0?list.slice(list.length-len,list.length):list
			obj.list = list_.concat(obj.list)
		}
		if(obj.req.currentpage===1){
			ScrollToBottom()
		}
		if(obj.room.identity==='user'&&obj.isNewpro){
			obj.isNewpro = false
			sendpro()
		}
		if(obj.loadstatus!='noMore'){
			obj.req.currentpage += 1;
			if(last_chatitem_id){
				ScrollToBottom(last_chatitem_id,0)
			}
		}
	}
	const ScrollToBottom=(id='#bottom_space',duration=300)=>{
		setTimeout(()=>{
			uni.pageScrollTo({selector: id,duration: duration})
		}, 10);	
	}
	
	const gethis=()=>{
		return new Promise((resovle,rej)=>{
			proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/inquiry/chat/list':'mp/product/inquiry/room/chat/list',obj.req,{token:true}).then(res=>{
				if(res.success&&res.msg){
					resovle(res.msg)
				}else{resovle(null)}
			}).catch(err=>{resovle(null)})	
		})
	}
	
	const sendpro=()=>{
		proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/get':'mp/product/get',{product_id:obj.room.product_id},{token: true},).then(res=>{
			if(res.success&&res.msg){
				const v = res.msg
				let price = ''
				let unit_ = ''
				if(v.preferential&&v.preferential.length){
					const o1 = v.preferential.find(ev=>ev.unit=='平方米')
					const o2 = v.preferential.find(ev=>ev.unit=='米')
					const o3 = v.preferential.find(ev=>ev.unit=='张')
					const o4 = v.preferential.find(ev=>ev.unit=='卷')
					price = o1 ? o1.special_price : (o2 ? o2.special_price : (o3 ? o3.special_price : (o4 ? o4.special_price : '')))
					unit_ = o1 ? `平方米` : (o2 ? `米` : (o3 ? `张` : (o4 ? `卷` : '')))
				}
				const msg = {
					type: 'product',
					msg: {
						product_id: obj.room.product_id,
						size_id: obj.room.size_id,
						title: v.title,
						cover: v.imgs.cover,
						price: price||'',
						min_price: v.min_price,
						max_price: v.preferential&&v.preferential.length>1?`${v.preferential[v.preferential.length-1].special_price}`:``,
						min_num_unit: v.preferential&&v.preferential.length?`${v.preferential[0].min_nums}${v.preferential[0].unit}`:'',
						unit_: unit_||''
					}
				}
				send(msg)
				
			}
		}).catch(err=>{})
	}
	
	const sendInput=()=>{
		const msg = {
			type: 'text',
			msg: obj.chatText
		}
		send(msg)
	}
	
	const send=(msg)=>{
		obj.chatMsg.msg = JSON.stringify(msg)
		// console.log('obj.chatMsg',obj.chatMsg);
		// return
		obj.sendDisabled = true
		proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/inquiry/room/chat':'mp/product/inquiry/room/chat',obj.chatMsg,{token:true}).then(res=>{
			obj.sendDisabled = false
			if(res.success){
				if(!['user_out','cs_out'].includes(msg.type)){
					const item = {
						"isme": true,
						"chat_id": proxy.$c.randomStr(),
						"type": obj.room.identity,
						"msg": msg,
						"intime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
						"updatetime": dayjs().format('YYYY-MM-DD HH:mm:ss'),
						"username": obj.room.identity==='user'?obj.u.name:obj.list[0].username,
						"head": obj.room.identity==='user'?obj.u.head:obj.list[0].head,
						"cs_name": obj.room.identity==='cs'?obj.u.name:obj.list[0].cs_name,
						"cs_head":  obj.room.identity==='cs'?obj.u.head:obj.list[0].cs_head,
					}
					obj.chatText = ''
					obj.chatMsg.msg = ''
					obj.list.push(item)
					ScrollToBottom()
				}
			}else{
				proxy.$c.Toast(res.err||'发送失败！')
			}
		}).catch(err=>{
			proxy.$c.Toast(err||'发送失败！')
			obj.sendDisabled = false
		})
	}
	
	const showMod=()=>{
		obj.showMod=!obj.showMod
	}
	
	const selectMod=(v)=>{
		obj.showMod = false
		if(['照片','拍摄'].includes(v.name)){
			// uni.chooseMedia({
			// 	mediaType: ['image'],
			// 	sourceType: v.name=='拍摄'?['camera']:['album'],
			// 	count: 9,
			// 	extension:['.png','.jpg','.jpeg'],
			// 	success: async(e) => {
			// 		const imgs = e.tempFiles
			// 		for (let i = 0; i < imgs.length; i++) {
			// 			const img = imgs[i].tempFilePath
			// 			const strs = img.split(/\.(?=[^\.]+$)/)
			// 			const filepath = await uploadimg(img,strs[1])
			// 			if(filepath){
			// 				const msg = {
			// 					type: 'image',
			// 					msg: filepath
			// 				}
			// 				send(msg)
			// 			}
			// 		}
			// 	}
			// })
			uni.chooseImage({
				sourceType: v.name=='拍摄'?['camera']:['album'],
				count: 9,
				extension:['.png','.jpg','.jpeg'],
				success: async(e) => {
					const imgs = e.tempFilePaths;
					for (let i = 0; i < imgs.length; i++) {
						const img = imgs[i]
						const filepath = await uploadimg(img,img.split(/\.(?=[^\.]+$)/)[1])
						if(filepath){
							const msg = {
								type: 'image',
								msg: filepath
							}
							send(msg)
						}
					}
				}
			})
		}else if(v.name==='产品'){
			proxy.$refs.popup.open('bottom')
			obj.showprops = true
		}
	}
	
	const closePopup=()=>{
		proxy.$refs.popup.close()
		obj.showprops = false
	}
	
	const proSelect=(e)=>{
		proxy.$refs.popup.close()
		obj.showprops = false
		const msg = {
			type: 'product',
			msg: e
		}
		send(msg)
	}
	 
	//获取上传配置
	const getTst=()=>{
	 	return new Promise((res,rej)=>{
	 		proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/inquiry/sts':'mp/product/inquiry/sts',{},{token: true},).then(d=>{
	 			if(d.success){
	 				res(d.msg?JSON.parse(d.msg):null)
	 			}else{res(null)}
	 		}).catch(err=>{res(null)})
		})
	}
	 
	const uploadimg=(img,fileType)=>{
		return new Promise(async(resovle,rej)=>{
			try {
				if(obj.tstOpt){
					proxy.$c.AliOss.upload(img,fileType,obj.tstOpt,(rs)=>{
						if(rs.code===1){
							if(rs.file){
								resovle(proxy.$c.fileHost+rs.file)	
							}else{
								resovle(null)
							}
						}
						if(rs.code===0){
							resovle(null)
						}
						if(rs.code===2){//上传中
							// rs.progress
						}
					});
				}else{
					resovle(null)
				}
			}catch(e) {
				resovle(null)
			}
		})
	}
	
	const outchart=()=>{
		uni.showModal({
			title: '提示',
			content: '确定要退出聊天吗？',
			success:(res)=>{
				if (res.confirm) {
					proxy.$reQuest.post(obj.room.identity==='cs'?'customerservice/product/inquiry/room/out':'mp/product/inquiry/room/out',{company_id:obj.room.company_id,room_id:obj.room.room_id},{token: true},).then(d=>{
						 if(d.success){
							 uni.navigateBack({delta:1})
						 }else{
							uni.showToast({title: d.err||'退出失败！',icon: 'none'}) 
						 }
					}).catch(err=>{
						 uni.showToast({title: '退出失败！',icon: 'none'})
					})
				}
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	.pagebox{
		width: 750rpx; min-height: 100vh; background-color: #f9f9f9;box-sizing: border-box;font-size: 28rpx;overflow: hidden;
		.topcus{
			position: fixed;left: 0;top: 0;
			width: 100vw;padding: 30rpx;box-sizing: border-box;background-color: #f9f9f9;
			font-size: 28rpx;box-shadow: 10rpx 10rpx 10rpx 10rpx rgba(0,0,0,0.03);
			.head{width: 100rpx;height: 100rpx;border-radius: 100rpx;}
			.company{margin: 10rpx 0;}
			.shouicon{position: absolute;right: 10rpx;bottom: 10rpx; z-index: 1; width: 46rpx;height: 46rpx;opacity: 0.5;}
		}
		.nomore{font-size: 22rpx; color: #999; margin: 60rpx 0;}
		.probox{
			width: 100%;height: auto; background-color: #fff; border-radius: 25rpx;overflow: hidden;
			display: flex; flex-direction: row; padding: 20rpx;box-sizing: border-box;
			.coverbox{width: 180rpx;height: 180rpx;border-radius: 25rpx; margin-right: 20rpx; overflow: hidden; background-color: #f0f0f0;border: solid 1rpx #f3f3f3;box-sizing: border-box;}
			.cover{width: 100%;height: 100%;}
			.protitle{font-size: 32rpx;font-weight: bold;}
			.price{
				font-size: 38rpx;color: #333;font-weight: bold;
				.desc{font-size: 26rpx;font-weight: 400;color: #999;margin-left: 5rpx;}
			}
			.min_nums{font-size: 24rpx;color: #333;font-weight: 400;}
		}
		.probox1{
			width: 330rpx;height: auto; background-color: #fff; border-radius: 25rpx;overflow: hidden;
			display: flex; flex-direction: column;
			.coverbox{width: 330rpx;height: 330rpx;overflow: hidden;}
			.cover{width: 100%;height: 100%;}
			.protitle{font-size: 26rpx;}
			.price{
				font-size: 38rpx;color: #333;font-weight: bold;
				.desc{font-size: 26rpx;font-weight: 400;color: #999;margin-left: 5rpx;}
			}
			.min_nums{font-size: 26rpx;color: #333;}
		}
		.intime{font-size: 22rpx;color: #999;margin-top: 30rpx;}
		.chartitem{
			display: flex; flex-direction: row; align-items: flex-start;
			margin-top: 30rpx;
			.head{
				width: 80rpx;height: 80rpx;border-radius: 80rpx;overflow: hidden;margin-bottom: 10rpx;image{width: 80rpx;height: 80rpx;}
			}
			.content{
				flex: 1;display: flex;flex-direction: column;margin-left: 10px;
				.text_chart{
					width: fit-content;max-width: 690rpx;height: auto;display: inline-flex;background: #1773E5;border-radius: 0rpx 18rpx 18rpx 18rpx;color: #fff;
					padding: 20rpx 30rpx;box-sizing: border-box;
				}
				.img_chart{
					width: 300rpx;border-radius: 10rpx;overflow: hidden;
				}
			}
			.namebox{font-size: 26rpx;margin-bottom: 10rpx;}
		}
		.rightitem{
			.content{
				align-items: flex-end;margin-right: 10px;
				.text_chart{border-radius: 18rpx 18rpx 0 18rpx;}
			}
		}
		.bottombox{
			position: fixed;left: 0;bottom: 0; z-index: 98;background: #fff;box-shadow: 0 -10rpx 10rpx 10rpx rgba(0,0,0,0.03);
			padding-left: 30rpx;padding-right: 30rpx;padding-top: 20rpx;
			box-sizing: border-box;
			.chartbox{
				width: 690rpx;
				.voicebox{
					width: 80rpx;min-width: 80rpx;height: 80rpx;border: 2rpx solid #D9DBE4;border-radius: 76rpx;margin-right: 20rpx;
					.voiceicon{width: 50rpx;height: 50rpx;}
				}
				.inputbox{
					flex: 1;height: 80rpx;border-radius: 80rpx;border: 2rpx solid #D9DBE5;
					padding: 0 0 0 30rpx;box-sizing: border-box;font-size: 28rpx;overflow: hidden;
					input{flex: 1;}
					
					.addiconbox{
						width: 80rpx;height: 80rpx;
						.addicon{width: 40rpx;height: 40rpx;}
					}
				}
				.send{height: 80rpx;border-radius: 80rpx;padding: 0 30rpx;box-sizing: border-box; margin-left: 10rpx;background: #1773E5;display: flex;align-items: center;justify-content: center;font-size: 28rpx;color: #fff;}
				.iconbox{
					width: 50rpx;height: 50rpx;margin-left: 20rpx;opacity: 0.6;image{width: 50rpx;height: 50rpx;}
				}
			}
			.desc{width: 100%;font-size: 22rpx;color: #999;text-align: right;margin-bottom: 20rpx;margin-top: 10rpx;}
			.modbox{
				.mod{
					width: 25%;margin-bottom: 30rpx;
					.item{
						width: 120rpx;height: 118rpx;background: #FFFFFF;box-shadow: 0rpx 5rpx 13rpx 0rpx #EDEDED;border-radius: 20rpx;margin-bottom: 20rpx;
						image{width: 42rpx;height: 42rpx;}
					}
					.name{font-size: 30rpx;}
				}
			}
		}
		.inputBottom{
			// padding: 20rpx 30rpx constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
			// padding: 20rpx 30rpx env( safe-area-inset-bottom);/* 兼容 iOS < 11.2 */
		}
		
		.edit{width: 30rpx;}
		.answer_chart{
			width: auto;max-width: 690rpx;height: auto;display: inline-flex;background: linear-gradient( 82deg, #F5F6F8 0%, #F5F6F8 100%);box-shadow: 0rpx 0rpx 9rpx 0rpx #EDF0F5;border-radius: 0rpx 25rpx 25rpx 25rpx;border: 1rpx solid #E1E8F8;
			padding: 20rpx;box-sizing: border-box;margin-bottom: 40rpx;
			.recommends{
				padding: 20rpx;box-sizing: border-box;border-radius: 10rpx;background: #ECEDF0;margin-bottom: 10rpx;
				font-size: 28rpx;
				.recommendDesc{
					color: #999;margin-bottom: 10rpx;
				}
				.name{
					color: #1773E5;
				}
				.proitem{
					background: #fff;border-radius: 10rpx;
					.cover{
						width: 120rpx;height: 120rpx;border-radius: 10rpx;overflow: hidden;background: #f9f9f9;
						image{width: 120rpx;height: 120rpx;}
					}
					.title{font-size: 30rpx;font-weight: bold;margin-bottom: 10rpx;}
					.prodesc{font-size: 24rpx;color: #999;}
					.minidesc{font-size: 22rpx;color: #999;}
					.min_price{font-size: 36rpx;font-weight: bold;color: red;}
					.readbtn{
						width: 108rpx;height: 46rpx;background: #e5f1ff;border-radius: 12rpx;font-size: 22rpx;color: #1773E5;
					}
				}
			}
			.desc{width: 100%;text-align: right;font-size: 22rpx;color: #999;}
		}
		
		#bottom_space{
			height: calc(constant(safe-area-inset-bottom) + 140rpx);
			height: calc(env(safe-area-inset-bottom) + 140rpx);
		}
		
		.popup-content{
			width: 100vw;height: 90vh;border-radius: 20rpx 20rpx 0 0;overflow: hidden;background-color: #fff;
			.poptitle{font-size: 32rpx;font-weight: bold;}
			.closeicon{width: 30rpx;height: 30rpx;}
		}
	}
</style>
